<template>
<div>
    <div class="aiRowThreeContainer">
            <p class="parpOne">国内独创AI智能投放技术</p>
            <p class="parpTwo">美辰独创的AI媒体智能投放大数据系统，精算海量网络媒体的广告价值，为广告主智能匹配对应的媒体，提高广告效能。</p>
            <div class="aiAnimate">
                <img src="../../assets/img/AI智投/圆圈/411.png" alt="" class="circle">
                <div class="aiAnimateOne">
                    <div class="aiAnimateOneL">
                        <ul>
                            <li>
                                <img src="../../assets/img/AI智投/圆圈/12.png" alt="" class="commonOne">
                                <img src="../../assets/img/AI智投/圆圈/14.png" alt="" class="commonTwo">
                            </li>
                            <li>
                                <img src="../../assets/img/AI智投/圆圈/8.png" alt="" class="commonThree">
                                <img src="../../assets/img/AI智投/圆圈/11.png" alt="" class="commonFour">
                            </li>
                            <li>
                                <img src="../../assets/img/AI智投/圆圈/9.png" alt="" class="commonFive">
                                <img src="../../assets/img/AI智投/圆圈/15.png" alt="" class="commonSix">
                            </li>
                        </ul>
                    </div>
                    <div class="aiAnimateOneR">
                        <ul>
                            <li>
                                <img src="../../assets/img/AI智投/圆圈/18.png" alt="" class="commonOne">
                                <img src="../../assets/img/AI智投/圆圈/14.png" alt="" class="commonTwo">
                            </li>
                            <li>
                                <img src="../../assets/img/AI智投/圆圈/001.png" alt="" class="commonThree">
                                <img src="../../assets/img/AI智投/圆圈/11.png" alt="" class="commonFour">
                            </li>
                            <li>
                                <img src="../../assets/img/AI智投/圆圈/9.png" alt="" class="commonFive">
                                <img src="../../assets/img/AI智投/圆圈/15.png" alt="" class="commonSix">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="aiAnimateTwo">
                    <div>
                        <p>媒体资源</p>
                        <p>全网覆盖</p>
                        <img src="../../assets/img/AI智投/圆圈/6.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/5.png" alt="">
                    </div>
                </div>
                <div class="aiAnimateThree">
                   
                    <div>
                        <img src="../../assets/img/AI智投/圆圈/25.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/26.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/27.png" alt="">
                        <p>广告主</p>
                    </div>
                    <div>
                        <p>多维度定向</p>
                        <img src="../../assets/img/AI智投/圆圈/28.png" alt="">
                    </div>
                    <div>
                        <ul>
                            <li>行业</li>
                            <li>产品</li>
                            <li>地域</li>
                            <li>人群</li>
                            <li>兴趣</li>
                            <li>媒体</li>
                            <li>预算</li>
                            <li>......</li>
                        </ul>
                    </div>
                    <div>
                        <img src="../../assets/img/AI智投/圆圈/30.png" alt="" style="margin-left:4px;">
                         <p class="add-stype">精准目标人群</p>
                    </div>
                    <div>
                        <img src="../../assets/img/AI智投/圆圈/31.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/32.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/33.png" alt="">
                        
                    </div>
                    <div>
                        <p>品牌</p>
                        <p>用户</p>
                        <p>媒体智投</p>
                        <img src="../../assets/img/AI智投/圆圈/34.png" alt="" style="margin-left:4px;" >
                    </div>
                    <div>
                        <ul>
                            <li>营销策略</li>
                            <li>媒体组合</li>
                            <li>预算分配</li>
                            <li>内容创新</li>
                            <li>数据舆情</li>
                        </ul>
                    </div>
                    <div>
                        <p>全渠道</p>
                        <p>自主投放</p>
                        <img src="../../assets/img/AI智投/圆圈/36.png" alt="" style="margin-left:6px;">
                    </div>
                    <div>
                        <p>AI</p>
                        <p>智能投放</p>
                        <img src="../../assets/img/AI智投/圆圈/3.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/2.png" alt="">
                    </div>
                    <div>
                        <p style="margin-left:6px;">实时调优</p>
                        <img src="../../assets/img/AI智投/圆圈/37.png" alt="" style="margin-left:6px;">
                    </div>
                    <div>
                        <img src="../../assets/img/AI智投/圆圈/38.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/39.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/40.png" alt="">
                        <p style="margin-left:3px;">解决方案</p>
                    </div>
                    <div>
                        <img src="../../assets/img/AI智投/圆圈/41.png" alt="" style="margin-left:9px;">
                    </div>
                    <div>
                        <p>数据分析</p>
                        <img src="../../assets/img/AI智投/圆圈/5.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/6.png" alt="">
                    </div>
                    <div>
                        <div>
                            <div>
                                <img src="../../assets/img/AI智投/圆圈/45.png" alt="" style="margin-top: 60px;">
                            </div>
                            <div style="margin-left: 10px;margin-right: 10px;">
                                <p>自助投放</p>
                                <img src="../../assets/img/AI智投/圆圈/5.png" alt="">
                                <img src="../../assets/img/AI智投/圆圈/6.png" alt="">
                            </div>
                            <div>
                                <img src="../../assets/img/AI智投/圆圈/49.png" alt="" style="margin-top: 60px;">
                            </div>
                        </div>
                        <div style="width:110px;text-align:center;">
                            <img src="../../assets/img/AI智投/圆圈/53.png" alt="" style="margin-top: 50px;margin-left:0px;">
                        </div>
                    </div>
                    <div>
                        <p>优化策略</p>
                        <img src="../../assets/img/AI智投/圆圈/5.png" alt="">
                        <img src="../../assets/img/AI智投/圆圈/6.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>    
</template>
<script>
export default {
    
}
</script>
<style scoped>
.aiRowThreeContainer{
    width:1200px;
    margin:0 auto;
    /* text-align: center; */
    /* height: 800px; */
    overflow: hidden;
}
.parpOne{
    margin-top: 80px;
    font-size: 30px;
    color:rgb(34, 34, 34);
    text-align: center;
}
.parpTwo{
    font-size: 16px;
    color:rgb(34, 34, 34);
    margin-top: 26px;
    text-align: center;
    font-weight: 100
}
.aiRowThreeContainer>.aiAnimate{
    margin-top:60px;
    /* height: 600px; */
    /* border:1px solid red; */
    position: relative;
}
.aiAnimateOne{
    overflow: hidden;
}
.aiAnimateOne>.aiAnimateOneL{
    float:left;
    width:50%;
}
.aiAnimateOne>.aiAnimateOneL>ul>li{
    width:66px;
    height: 66px;
    float: left;
    position: relative;
    margin-left: 50px;
    /* border:1px solid red; */
}
.aiAnimateOne>.aiAnimateOneL>ul{
    margin-left: 70px;
}
/* .aiAnimateOne>.aiAnimateOneL>ul>li:nth-child(1)>img:nth-child(1){
    animation: demo1 3s linear infinite alternate;
} */
.commonOne{
    position: absolute;
    top:20px;
    left:5px;
}
.commonTwo{
    position: absolute;
    top:40px;
    right:5px;
}
.commonThree{
    position: absolute;
    top:7px;
    right:16px;
}
.commonFour{
    position: absolute;
    bottom:10px;
    left:10px;
}
.commonFive{
    position: absolute;
    top:7px;
    left:13px;
}
.commonSix{
    position: absolute;
    bottom:9px;
    right:10px;
}
.aiAnimateOne>.aiAnimateOneR{
    float:right;
    width:50%;
}
.aiAnimateOne>.aiAnimateOneR>ul>li{
    width:66px;
    height: 66px;
    float: left;
    position: relative;
    margin-left: 50px;
    /* border:1px solid blue; */
}
.aiAnimateOne>.aiAnimateOneR>ul{
    margin-left: 130px;
}
.aiAnimateOne>.aiAnimateOneL>ul>li:nth-child(1){
    background: url("../../assets/img/AI智投/圆圈/13.png");
}
.aiAnimateOne>.aiAnimateOneL>ul>li:nth-child(2){
    background: url("../../assets/img/AI智投/圆圈/10.png");
}
.aiAnimateOne>.aiAnimateOneL>ul>li:nth-child(3){
    background: url("../../assets/img/AI智投/圆圈/7.png");
}
.aiAnimateOne>.aiAnimateOneR>ul>li:nth-child(1){
    background: url("../../assets/img/AI智投/圆圈/16.png");
}
.aiAnimateOne>.aiAnimateOneR>ul>li:nth-child(2){
    background: url("../../assets/img/AI智投/圆圈/999.png");
}
.aiAnimateOne>.aiAnimateOneR>ul>li:nth-child(3){
    background: url("../../assets/img/AI智投/圆圈/19.png");
}
.aiAnimateTwo>div{
    width:160px;
    height: 160px;
    background: url("../../assets/img/AI智投/圆圈/4.png");
    margin-left: 520px;
    overflow: hidden;
    position: relative;
    z-index:10;
}
.aiAnimateTwo>div>img:nth-child(3){
    position: absolute;
    top:45px;
    left:15px;
}
.aiAnimateTwo>div>img:nth-child(4){
    position: absolute;
    bottom:45px;
    right:15px;
}
.aiAnimateTwo>div>p{
    text-align: center;
    font-size: 18px;
    color:rgb(255, 255, 255);
    font-family: PingFang SC;
}
.aiAnimateTwo>div>p:nth-child(1){
    margin-top: 54px;
}
.aiAnimateTwo>div>p:nth-child(2){
    margin-top: 8px;
}
.aiAnimateThree{
    overflow: hidden;
}
.aiAnimateThree>div{
    float:left;
    position: relative;
}
.aiAnimateThree>div:nth-child(1){
    margin-top: 122px;
}
.aiAnimateThree>div:nth-child(1)>img:nth-child(2){
    position: absolute;
    left:0;
    bottom:41px;
}
.aiAnimateThree>div:nth-child(1)>img:nth-child(3){
    position: absolute;
    right:12px;
    top:0;
}
.aiAnimateThree>div:nth-child(1)>p{
    font-size: 16px;
    color:rgb(64, 149, 238);
    margin-top: 10px;
}
.aiAnimateThree>div:nth-child(2){
    margin-top: 40px;
    width:58px;
}
.aiAnimateThree>div:nth-child(2)>p{
    width:16px;
    font-size: 16px;
    color:rgb(64, 149, 238);
    margin:0 auto;
    margin-left:13px;
}
.aiAnimateThree>div:nth-child(3)>ul{
    margin-top: -10px;
}
.aiAnimateThree>div:nth-child(3)>ul>li{
    width:60px;
    height: 26px;
    background-image: url("../../assets/img/AI智投/圆圈/29.png");
    text-align: center;
    line-height: 26px;
    font-size: 14px;
    color:rgb(34, 34, 34);
    margin-top: 10px;
}
.aiAnimateThree>div:nth-child(4){
    width:41px;
    margin-top: 145px;
}
.aiAnimateThree>div:nth-child(5){
    margin-top: 122px;
}
.aiAnimateThree>div:nth-child(5)>img:nth-child(2){
    position: absolute;
    bottom: 7px;
    left: 2px;
}
.aiAnimateThree>div:nth-child(5)>img:nth-child(3){
    position: absolute;
    top: 7px;
    right: 2px;
}
.aiAnimateThree>div:nth-child(6){
    margin-top: 87px;
    width:82px;
}
.aiAnimateThree>div:nth-child(6)>p{
    font-size: 14px;
    color:rgb(237, 64, 64);
    text-align: center;
    margin-left:-5px;
}
.add-stype{
    color:rgb(237, 64, 64);
    position: absolute;
    left:28px;
    width:100px;
    top:35px;
     font-size: 14px;
}
.circle{
    position:absolute;
    left:12.5%;
    top:45px;
    z-index:-1;
}
.aiAnimateThree>div:nth-child(7){
    margin-top: 67px;
}
.aiAnimateThree>div:nth-child(7)>ul{
    margin-top: -10px;
}
.aiAnimateThree>div:nth-child(7)>ul>li{
    width:80px;
    height: 26px;
    background-image: url("../../assets/img/AI智投/圆圈/35.png");
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    color:rgb(34, 34, 34);
    margin-top: 10px;
}
.aiAnimateThree>div:nth-child(8){
    margin-top: 104px;
    width:67px;
}
.aiAnimateThree>div:nth-child(8)>p{
    font-size: 14px;
    color:rgb(237, 64, 64);
    text-align: center;
}
.aiAnimateThree>div:nth-child(9){
    width:200px;
    height: 227px;
    background-image: url("../../assets/img/AI智投/圆圈/1.png");
}
.aiAnimateThree>div:nth-child(9)>p{
    font-size: 24px;
    color:#fff;
    text-align: center;
}
.aiAnimateThree>div:nth-child(9)>img:nth-child(3){
    position: absolute;
    bottom: 42px;
    left:27px;
}
.aiAnimateThree>div:nth-child(9)>img:nth-child(4){
    position: absolute;
    top: 66px;
    right:27px;
}
.aiAnimateThree>div:nth-child(9)>p:nth-child(1){
    margin-top: 95px;
}
.aiAnimateThree>div:nth-child(10){
    margin-top: 124px;
    width:78px;
}
.aiAnimateThree>div:nth-child(10)>p{
    font-size: 14px;
    color:#FEBA6E;
}
.aiAnimateThree>div:nth-child(11){
    margin-top: 120px;
}
.aiAnimateThree>div:nth-child(11)>img:nth-child(2){
    position: absolute;
    left:0;
    bottom: 45px;
}
.aiAnimateThree>div:nth-child(11)>img:nth-child(3){
    position: absolute;
    right:0;
    top: 20px;
}
.aiAnimateThree>div:nth-child(11)>p{
    font-size: 14px;
    color:#FEBA6E;
    margin-top: 10px;
}
.aiAnimateThree>div:nth-child(12){
    width:85px;
    margin-top: 143px;
}
.aiAnimateThree>div:nth-child(13){
    margin-top: 120px;
}
.aiAnimateThree>div:nth-child(13){
    width:84px;
    height: 84px;
    background-image: url("../../assets/img/AI智投/圆圈/42.png");
}
.aiAnimateThree>div:nth-child(13)>p{
    font-size: 16px;
    color:#fff;
    text-align: center;
    line-height: 84px;
}
.aiAnimateThree>div:nth-child(13)>img:nth-child(2){
    position: absolute;
    top:7px;
    left:3px;
}
.aiAnimateThree>div:nth-child(13)>img:nth-child(3){
    position: absolute;
    bottom:7px;
    right:3px;
}
.aiAnimateThree>div:nth-child(14){
    margin-top: 25px;
    overflow: hidden;
}
.aiAnimateThree>div:nth-child(14)>div:nth-child(1)>div{
    float: left;
}
.aiAnimateThree>div:nth-child(14)>div:nth-child(1)>div:nth-child(2){
    width:84px;
    height: 84px;
    background: url("../../assets/img/AI智投/圆圈/46.png");
    position: relative;
}
.aiAnimateThree>div:nth-child(14)>div:nth-child(1)>div:nth-child(2)>img:nth-child(2){
    position: absolute;
    top:9px;
    right:5px;
}
.aiAnimateThree>div:nth-child(14)>div:nth-child(1)>div:nth-child(2)>img:nth-child(3){
    position: absolute;
    bottom:9px;
    left:5px;
}
.aiAnimateThree>div:nth-child(14)>div:nth-child(1)>div:nth-child(2)>p{
    font-size: 16px;
    color:#fff;
    line-height: 84px;
    text-align: center;
}
.aiAnimateThree>div:nth-child(15){
    width:84px;
    height: 84px;
    background-image: url("../../assets/img/AI智投/圆圈/50.png");
    float:right;
    margin-top: -40px;
}
.aiAnimateThree>div:nth-child(15)>p{
    text-align: center;
    line-height: 84px;
    font-size: 16px;
    color:#fff;
}
.aiAnimateThree>div:nth-child(15)>img:nth-child(2){
    position: absolute;
    top:0;
    right: 15px;
}
.aiAnimateThree>div:nth-child(15)>img:nth-child(3){
    position: absolute;
    bottom: 0px;
    left: 13px;
}
</style>

